<script type="text/javascript">
    $('#test-datagrid').datagrid({
        gridTitle: 'datagrid 完整示例',
        showToolbar: true,
        toolbarItem: 'all',
        local: 'local',
        dataUrl: 'datagrid/datagrid-demo-json.js',
        dataType: 'json',
        sortAll: true,
        filterAll: true,
        columns: [
            {
                name: 'code',
                label: '门诊号',
                align: 'center',
                width: 70
            },
            {
                label: '挂号信息',
                columns: [{
                    name: 'regdate',
                    label: '挂号日期',
                    align: 'center',
                    type: 'date',
                    pattern: 'yyyy-MM-dd HH:mm:ss',
                    render: function (value) {
                        return value ? value.substr(0, 16) : value
                    }
                },
                    {
                        name: 'order',
                        label: '当日序号',
                        align: 'center',
                        width: 50
                    },
                    {
                        name: 'regname',
                        label: '挂号类别'
                    },
                    {
                        name: 'deptname',
                        label: '科室名称'
                    },
                    {
                        name: 'regfee',
                        label: '挂号费',
                        align: 'center',
                        width: 60
                    }]
            },
            {
                label: '病人信息',
                columns: [{
                    name: 'name',
                    label: '姓名',
                    align: 'center',
                    width: 70
                },
                    {
                        name: 'sex',
                        label: '性别',
                        align: 'center',
                        width: 45,
                        render: function (value) {
                            return String(value) == 'true' ? '男' : '女'
                        }
                    },
                    {
                        name: 'age',
                        label: '年龄',
                        align: 'center',
                        type: 'number',
                        width: 45,
                        render: function (value) {
                            return 2015 - parseInt(value)
                        }
                    }]
            },
            {
                label: '就诊信息',
                columns: [{
                    name: 'fr',
                    label: '是否初诊',
                    align: 'center',
                    width: 70
                },
                    {
                        name: 'see',
                        label: '已就诊',
                        align: 'center',
                        width: 55
                    },
                    {
                        name: 'seedate',
                        label: '就诊时间',
                        align: 'center',
                        type: 'date',
                        pattern: 'yyyy-MM-dd HH:mm:ss'
                    }]
            },
            {
                name: 'opercode',
                label: '操作员编号',
                align: 'center'
            },
            {
                name: 'operdate',
                label: '操作时间',
                align: 'center',
                type: 'date',
                pattern: 'yyyy-MM-dd HH:mm:ss'
            }
        ],
        hiddenFields: [{name: 'deptcode'}],
        editUrl: 'ajaxDone1.html',
        paging: {pageSize: 50, pageCurrent: 10},
        showCheckboxCol: true,
        showEditBtnsCol: true,
        linenumberAll: true,
        fullGrid: true
    })
</script>
<div class="bjui-pageContent">
    <script type="text/javascript">
        var $datagrid = $('#test-datagrid')

        function displayLinenumberCol(flag) {
            $datagrid.datagrid('showLinenumber', flag)
        }
        function unLockLinenumberCol() {
            $datagrid.datagrid('colLock', 0, false)
        }
        function displayCheckboxCol(flag) {
            $datagrid.datagrid('showCheckboxcol', flag)
        }
        function displayEditCol(flag) {
            $datagrid.datagrid('showEditCol', flag)
        }
        function displayCol(flag, index) {
            $datagrid.datagrid('showhideColumn', index, flag)
        }
        function lockCol(flag, index) {
            $datagrid.datagrid('colLock', index, flag)
        }
        function doEditTr(index) {
            $datagrid.datagrid('doEditRow', index)
        }
        function doCancelEditTr(index) {
            $datagrid.datagrid('doCancelEditRow', index)
        }
        function doSaveEditTr(index) {
            $datagrid.datagrid('doSaveEditRow', index)
        }
        function doDelTr(index) {
            $datagrid.datagrid('doDelRow', index)
        }
    </script>
    <div style="margin:15px;">
        <button type="button" class="btn-default" onclick="displayLinenumberCol(true);">显示行号列</button>
        <button type="button" class="btn-default" onclick="displayLinenumberCol(false);">隐藏行号列</button>
        <button type="button" class="btn-default" onclick="displayLinenumberCol('lock');">锁定行号列</button>
        <button type="button" class="btn-default" onclick="displayLinenumberCol('unlock');">解锁行号列</button>
        <button type="button" class="btn-default" onclick="displayCheckboxCol(true);">显示复选框列</button>
        <button type="button" class="btn-default" onclick="displayCheckboxCol(false);">隐藏复选框列</button>
        <button type="button" class="btn-default" onclick="displayCheckboxCol('lock');">锁定复选框列</button>
        <button type="button" class="btn-default" onclick="displayCheckboxCol('unlock');">解锁复选框列</button>
        <button type="button" class="btn-default" onclick="displayEditCol(true);">显示编辑按钮列</button>
        <button type="button" class="btn-default" onclick="displayEditCol(false);">隐藏编辑按钮列</button>
        <hr style="margin: 5px 0">
        <table id="test-datagrid" data-width="100%" data-height="500" class="table table-bordered">
        </table>
    </div>
</div>